<template>
  <div class="service-contail">
    <van-nav-bar class="service-header"
                 title="服务" />
    <div class="service-wepper">
      <div class="item"
           v-for="(item,index) in menu"
           :key="index">
        <div class="name"
             :style="{color:item.  color}">{{item.title}}</div>
        <van-row span="24"
                 class="list">
          <van-col span="6"
                   class="link"
                   @click.native="goPage(child.href)"
                   v-for="(child,cindex) in item.list"
                   :key="cindex">
            <van-icon :style="{color:child.color,transform:`rotate(${child.rotate}deg)`}"
                      :name="child.icon" />
            <span>{{child.title}}</span>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import baseCommon from '@/mixins/common';
import { getList } from '@/api/service';

export default {
  name: 'service',
  mixins: [baseCommon()],
  data() {
    return {
      headFlag: false,
      menu: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() { },
  methods: {
    getList() {
      getList().then((res) => {
        const data = res.data.data;
        this.menu = data;
      });
    },
    handleSearch() {
      if (!this.headFlag) {
        this.headFlag = true;
      } else {
        this.$toast('搜索成功');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.service-contail {
}
.service-header {
}
.service-wepper {
}
.item {
  &:not(:last-child) {
    margin-bottom: 10px;
  }
  padding: 0 22px;
  background-color: #fff;
  .name {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
  }
  .list {
    padding: 5px 0 6px 0;
    border-top: 1px solid #eee;
    .link {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 18px 0;
      text-align: center;
      i {
        $height: 34px;
        width: $height;
        height: $height;
        margin-bottom: 16px;
        color: #333;
        font-size: $height;
      }
      span {
        color: #333;
        font-size: 14px;
      }
    }
  }
}
</style>

